<template>
  <div class='search'>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <!-- 分类 -->
    <div class="box-off">
      <van-tabs
        title-active-color="#02B702"
        v-model="active"
        type="lind">
        <van-tab :title="txt1">
          <ul class="tab-con">
            <li
              :id="item.value == onId ? col : ''"
              v-for="item in option[0].navs"
              :key="item.value"
              @click="tabLi('txt1', item)"
            >{{ item.text }}</li>
          </ul>
        </van-tab>
        <van-tab :title="txt2">
          <ul class="tab-con">
            <li
              :id="item.value == onId ? col : ''"
              v-for="item in option[1].navs"
              :key="item.value"
              @click="tabLi('txt2', item)">
              {{ item.text}}
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <div class="list" v-for="item in boxOff" :key="item.id">
      <router-link :to="{name: 'Detail', params: {id: item.id}}">
        <img :src="item.images.small" :alt="item.title"/>
        <div class="tit">
          <p>{{ item.title}}</p>
          <span>类型：</span>
          <span v-for="(item, index) in item.genres" :key="index">
            {{ item }}
          </span><br>
          <span class="sp-3">上映日期：{{ item.pubdates[0]}}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getNew } from '@/api/search'

export default {
  name: 'search',
  data () {
    return {
      value: '',
      boxOff: [],
      boxOff1: [],
      txt1: '类型',
      txt2: '筛选',
      col: 'l-bgk',
      onId: null,
      value1: 0,
      active: 2,
      option: [
        {
          navs: [
            { text: '全部类型', value: 0 },
            { text: '剧情', value: 1 },
            { text: '动作', value: 2 },
            { text: '爱情', value: 3 },
            { text: '犯罪', value: 4 },
            { text: '科幻', value: 5 },
            { text: '喜剧', value: 6 },
            { text: '悬疑', value: 7 },
          ]
        },
        {
          navs: [
            { text: '综合排序', value: 1 },
            { text: '近期热度', value: 2 },
            { text: '首映时间', value: 3 },
            { text: '高分优先', value: 4 },
          ],
        }
      ],
    }
  },
  methods: {
    tabLi(val, tel) {
      // 设置样式与隐藏
      this[val] = tel.text
      this.onId = tel.value
    },
  },
  computed: {},
  components: {},
  created () {
    console.log(getNew())
    getNew()
      .then(res => {
        this.boxOff = res.subjects
      }).catch(console.log)
  },
}
</script>

<style lang='less' scoped>
  .tab-con {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 0 5px;
  }
  .tab-con>li {
    background: #eee;
    width: 75px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 12px;
    margin: 8px 0;
    border-radius: 6px;
  }
  #l-bgk {
    color: #02B702;
    background: #d8fcea;
  }
  .list {
    margin: 10px;
  }
  .list>a {
    color: #000;
  }
  .list>a>img {
    width: 90px;
    height: 110px;
    vertical-align: top;
  }
  .tit {
    display: inline-block;
    margin: 0 8px;
  }
  .tit>p {
    line-height: 0;
    color: orange;
  }
  .tit>span {
    font-size: 12px;
  }
  .tit .sp-3 {
    display: inline-block;
    overflow: hidden;
    width: 230px;
  }
</style>
